import SkeletonItem from '../SkeletonItem';
import { View } from '@tarojs/components';
import Card from '@/components/Card';
import styles from '../style.scss';

export default () => {
  return (
    <View className={styles.detail}>
      <Card className={styles.card}>
        <View className={styles.grid}>
          <SkeletonItem width={77} height={77} />
          <SkeletonItem height={54} style={{ flex: 1 }} />
          <SkeletonItem height={40} style={{ width: '100%' }} />
          <SkeletonItem height={40} style={{ width: '100%' }} />
        </View>
      </Card>
      {Array.from(new Array(3)).map((__, index) => (
        <Card className={styles.card} key={index}>
          <View className={styles.grid}>
            <SkeletonItem height={40} style={{ width: '100%' }} />
            {Array.from(new Array(6)).map((_, i) => (
              <View className={styles.grid} key={i}>
                <SkeletonItem height={40} width={150} />
                <SkeletonItem height={40} width={150} />
              </View>
            ))}
          </View>
        </Card>
      ))}
    </View>
  );
};
